class ElStep extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
    this.stepStatus = 'wait' // 默认状态为等待
  }

  static get observedAttributes() {
    return ['status']
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'status') {
      this.stepStatus = newValue
      this.render()
    }
  }

  connectedCallback() {
    this.render()
  }

  render() {
    this.shadowRoot.innerHTML = `
        <style>
            .step {
            /* 样式根据 Element UI 设计调整 */
            }
            .success{
             color: #67c23a;
            }
        </style>
        <div class="step ${this.stepStatus}">
            <slot></slot>
        </div>
        `
  }
}

customElements.define('el-step', ElStep)

class ElSteps extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' })
  }

  connectedCallback() {
    this.render()
  }

  render() {
    this.shadowRoot.innerHTML = `
            <style>
                :host {
                display: block;
                }
                /* 这里可以添加更多样式以匹配 Element UI 的样式 */
            </style>
            <slot></slot>
            `
  }
}
customElements.define('el-steps', ElSteps)
